﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            transform-style: preserve-3d;
            border-top: 1px solid #ccc;
            background: #333;
        }
        
        @keyframes roll {
            0% {
                transform: rotateX(-20deg) rotateY(0deg);
            }
            50% {
                transform: rotateX(-20deg) rotateY(360deg);
            }
            100% {
                transform: rotateX(-20deg) rotateY(720deg);
            }
        }
        
        .box {
            position: relative;
            margin: 200px auto;
            width: 400px;
            transform-origin: center;
            transform: rotateX(-20deg);
            animation: roll 10s infinite linear;
            transform-style: preserve-3d;
        }
        
        .item {
            /*float:left;*/
            position: absolute;
            width: 200px;
            border: 2px solid #f56666;
            height: 200px;
            transition: all 3s;
        }
        
        .item:nth-child(1n) {
            background: seagreen;
        }
        
        .item:nth-child(2n) {
            background: dodgerblue;
        }
        
        .item:nth-child(3n) {
            background: palegreen;
        }
        
        .item:nth-child(5n) {
            background: palevioletred;
        }
        
        h3 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            text-align: center;
            background: #f56666;
            color: white;
            font: 700 25px/40px 'microsoft yahei';
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="description">
        <h3>点击图片触发变换</h3>
    </div>
    <script>
        //让图形可以围成一个圈 （必须是等宽的图形）
        //传入option    imgs（要进行围绕的图形组）  
        function PicCircle(option) {
            this.imgs = option.imgs;
            this.distance = option.distance || 1;
            this.width = this.imgs[0].offsetWidth;
        }
        PicCircle.prototype = {
            constructor: PicCircle,
            move: function () {
                var imgs = this.imgs,
                    width = this.width,
                    deg = 360 / imgs.length,
                    distance = this.distance,
                    z = Math.floor(width * .5 / Math.tan(deg * Math.PI / 360));
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].style.transform = 'rotateY(' + deg * i + 'deg) translateZ(' + z * distance + 'px)';
                }
            }
        };

        /* -------------------  使用说明  --------------------- */
        /*
            new PicCircle (option);
                @param   imgs      ------       对应的需要连接的DOM元素         (必须)
                @param   distance  ------       设置偏移距离比例  为1时是恰好连接   默认为1

                方法：  .move()    ------执行变换

        */

        /* -----------------   测试  ---------------- */
        var imgs = document.querySelectorAll('.item');
        var circle = new PicCircle({
            imgs: imgs,
            // distance: 2
        });
        document.querySelector('.box').onclick = function () {
            circle.move();
        };
    </script>


</body>

</html>